<template>
    <div class="achievement-list-page">
        <el-card shadow="never" class="mt-4">
            <div class="mt-3" v-loading="loading">
                <div class="flex">
                    <div v-if="team">
                        团队名称: {{ team.name }} 团队人数: {{ team.members }}
                    </div>
                    <span class="ml-auto"></span>
                    <el-button type="text" @click="onExportClick(id)">导出</el-button>
                </div>
                <el-table
                :data="pageData"
                :span-method="handleSpan"
                :row-class-name="handleTableRowClass"
                class="mt-4">
                    <el-table-column
                    prop="indexNum"
                    label="序号"
                    width="50"/>
                    <el-table-column label="工作场景" prop="name"/>
                    <el-table-column
                    label="胜任力评估(实际得分/做题人应得满分(团队人数满分))"
                    align="center"
                    prop="capability"/>
                    <el-table-column
                    label="作业思考题(百分比)"
                    align="center"
                    prop="question"/>
                    <el-table-column
                    label="行动清单(百分比)"
                    align="center"
                    prop="mission"/>
                    <el-table-column
                    label="学习内容"
                    align="center"
                    prop="section"/>
                </el-table>
            </div>
        </el-card>
    </div>
</template>

<script>
import IndexNumber from '../../../helpers/IndexNumber';

export default {
    components: {
    },
    mixins: [require('../../../mixins/CacheQuery').default],
    data() {
        return {
            loading: false,
            id: this.$route.params.id,
            courses: [],
            questions: [],
            missions: [],
            report: [],
            data: [],
            team: '',
            pageData: [],
            indexNum: 1,
        };
    },
    filters: {
    },
    methods: {
        isCompanyAccount() {
            return this.$store.state.my.company_id > 0;
        },
        onSubmit() {
            this.form.page = 1;
            this.fetchData();
        },
        onResetFilters() {
            this.$refs.form.resetFields();
        },
        onCurrentChange(val) {
            this.form.page = val;
            this.fetchData();
        },
        onPageSizeChange(val) {
            this.form.size = val;
            this.form.page = 1;
            this.fetchData();
        },
        async fetchData() {
            this.loading = true;
            this.team = await API.get(`role/team/${this.id}`);
            if (!this.team) {
                this.loading = false;
                return;
            }
            const res = await API.get('statistics/course');
            this.courses = res.courses;
            this.questions = res.questions;
            this.missions = res.missions;
            this.labels = res.labels;
            this.report = await API.get(`statistics/team/${this.id}`);
            this.data = this.courses.map((course) => {
                const courseId = course.id;
                const question = this.questions.filter((quiz) => quiz.course_id === courseId)[0];
                // 当前工作场景未设置思考题与胜任力题
                if (question === undefined) {
                    course.capability = '-';
                    course.question = '-';
                    const report = this.findReportByCourseId(course.id);
                    return this.filterCourseMission(course, report);
                }
                if (question.combine === 3) {
                    const report = this.findReportByCourseId(question.course_id);
                    // 团队总人数 * 题目选项最高分
                    const scoreTotal = this.team.members * question.score;
                    // 实际做题人 * 题目选项最高分
                    // const finishedScoreTotal = report.finished_capability * question.score;
                    course.capability = report === undefined
                        ? '' : `${report.score}/${report.finished_capability * question.score} (${scoreTotal})`;
                    course.question = report === undefined || this.team.members === 0
                        ? '0%' : `${((report.finished_question * 100) / this.team.members).toFixed(2)}%`;
                    return this.filterCourseMission(course, report);
                }
                if (question.combine === 2) {
                    const report = this.findReportByCourseId(question.course_id);
                    const scoreTotal = this.team.members * question.score;
                    course.capability = report === undefined
                        ? '' : `${report.score}/${report.finished_capability * question.score} (${scoreTotal})`;
                    course.question = '-';
                    return this.filterCourseMission(course, report);
                }
                if (question.combine === 1) {
                    const report = this.findReportByCourseId(question.course_id);
                    course.capability = '-';
                    course.question = report === undefined || this.team.members === 0
                        ? '0%' : `${((report.finished_question * 100) / this.team.members).toFixed(2)}%`;
                    return this.filterCourseMission(course, report);
                }
                course.mission = '';
                course.capability = '';
                course.question = '';
                return course;
            });
            this.labels.map((label) => {
                this.pageData.push({
                    indexNum: label.name,
                    name: '',
                    mission: '',
                    capability: '',
                    question: '',
                    id: label.id,
                    isLabel: true,
                });
                label.course_ids.map((courseId) => {
                    const target = this.data.filter((course) => course.id === courseId)[0];
                    if (target !== undefined) {
                        const init = {...target};
                        this.pageData.push(Object.assign(init, {indexNum: this.indexNum++}));
                    }
                    return courseId;
                });
                this.indexNum = 1;
                return label;
            });
            this.loading = false;
        },
        findReportByCourseId(courseId) {
            return this.report.filter((report) => report.course_id === courseId)[0];
        },
        filterCourseMission(course, report) {
            if (this.missions.includes(course.id)) {
                course.mission = report === undefined || this.team.members === 0
                    ? '0%' : ((report.finished_mission * 100) / this.team.members).toFixed(2);
            } else {
                course.mission = '-';
            }
            course.section = report === undefined
                ? `0/${this.team.members}` : `${report.finished_section}/${this.team.members}`;
            course.isLabel = false;
            return course;
        },
        indexMethod(index) {
            return new IndexNumber()
                .getIndex(this.totalElements, this.form.page, this.form.size, index);
        },
        handleSpan({ row, columnIndex }) {
            if (row.isLabel === true) {
                if (columnIndex === 0) {
                    return {rowspan: 1, colspan: 4};
                }
            }
            return {rowspan: 1, colspan: 1};
        },
        handleTableRowClass({row}) {
            if (row.isLabel) {
                return 'warning-row';
            }
            return '';
        },

        onExportClick(id) {
            const url = 'statistics/export';
            const query = `/team/${id}`;
            window.location.href = `${process.env.VUE_APP_API_PREFIX}${url}${query}`;
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss">
.achievement-list-page {
    .filter {
        .input-width {
            max-width: 200px;
        }
    }
    .logo {
        width: 60px;
        height: 60px;
    }
    .footer {
        height: 44px;
        background: #f7f7f7;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
    }
    .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #f5f7fa;
        color: #909399;
    }
}
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>
